<template>
  <div class="choose_wrap">
    <el-button type="text" icon="el-icon-arrow-left" class="exit" size="mini" @click="gotoBack">返回</el-button>

    <div class="wrapper">
      <h1>摄像头实时拍照</h1>
      <div id="webcams"></div>
    </div>
    <!-- <div class="ocr_wrap">
      <img src="../assets/ocr.png" alt="" width="590px" height="200px">
    </div>
    <div class="title">
      请选择要识别的任务单图片文件夹：
    </div>
    <form class="inputFile" enctype="multipart/form-data">
      <input type="file" id="files" @change="getFile($event)" ref="uploadFile" webkitdirectory>
      点击选择任务单图片文件夹
    </form>
    <div class="fileName" v-if="fileNum !== ''">
      已选择：{{ fileNum }} 张图片
    </div>
    <div class="fileName" v-if="fileNum == ''">
      请选择文件夹
    </div> -->
    <div v-loading="shows" class="btn" @click="sendFile">点击此处开始识别</div>
  </div>
</template>

<script>
import $ from "jquery";

export default {
  data() {
    return {
      fileList: [],
      fileNum: "",
      //isShow: true,
      result: {},
      shows: false,
      ws: null,
    };
  },
  mounted() {
    this.initWebSocket()
  },
  methods: {
    getFile(event) {
      let fileList = event.target.files;
      this.fileList = Array.prototype.slice.call(fileList)
      this.fileNum = this.fileList.length
    },
    sendFile() {
      // 断开websocket连接
      this.ws.close()
      this.shows = true //点击开始识别后进行loading等待
      this.$message({
        type: "warning",
        message: "正在识别中，请稍后...",
      })
      this.axios({
        url: "http://localhost:8091/camera",
        method: "get",
      })
        .then((res) => {
          this.shows = false //识别有结果后结束loading等待
          let isShow = res.data.data
          if (isShow) {
            //如果成功则跳转
            this.$router.push("/index")
          } else {
            this.$message({
              type: "warning",
              message: "识别失败，请重新尝试...",
            })
          }
        })
        .catch((e) => {
          console.log(e)
        })
    },
    gotoBack() {
      this.$router.push('/')
      
    },
    

    initWebSocket() {
      let wsuri = "ws://localhost:8091/test/one"
      this.ws = new WebSocket(wsuri)
      this.ws.onmessage = this.websocketonmessage
      this.ws.onopen = this.websocketonopen
      this.ws.onerror = this.websocketonerror
      this.ws.onclose = this.websocketclose
    },
    websocketonopen() {
      console.log("连接 websocket 成功")
      let data = {
        // msg: "data是发给后端的数据",
      }
      //前端向后端发送数据,注意：前端发送的数据必须为字符串
      this.ws.send(JSON.stringify(data))
    },

    websocketonmessage(e) {
      var data = JSON.parse(e.data),
        type = data.type,
        i = 0,
        $webcams = $("#webcams"),
        $img = null

      if (typeof console !== "undefined") {
        console.info("WS message", type)
      }

      if (type === "list") {
        for (i = 0; i < data.webcams.length; i += 1) {
          $img = $("<img></img>")
            .attr("src", "pic.jpg")
            .attr("alt", data.webcams[i])
            .attr("name", data.webcams[i])
            .attr("class", "imgVedio")
          $webcams.append($img)
        }
      } else if (type === "image") {
        var $img = $("img[name='" + data.webcam + "']").attr(
          "src",
          "data:image/jpeg;base64," + data.image
        )
      }
    },
    websocketonerror() {
      this.initWebSocket()
      console.log('错误')
    },
    websocketclose(e) {
      console.log("断开连接", e)
    }
  }
}
</script>

<style  scoped>
.exit {
  text-align: center;
    margin-top: 20px;
    margin-left: 30px;
    font-size:16px;
}
.wrapper {
  width: 800px;
}
.wrapper h1 {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

.wrapper /deep/ .imgVedio {
  margin-bottom: 8px;
  width: 1000px;
  height: 700px;
  box-shadow: 0 0 16px #444;
  border: 1px solid #fff;
  transition: all 1s ease-in;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 80px;
}
.btn {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 50px;
  color: #fff;
  background: #333;
  width: 200px;
  padding: 10px 20px;
  text-align: center;
  line-height: 20px;
  position: absolute;
  display: inline-block;
  border-radius: 2px;
  position: absolute;
  right: 385px;
  margin-top: 150px;
  cursor: pointer;
  font-size: 24px;
}
.btn:hover {
  color: #fff;
  background: #666;
  text-decoration: none;
}
</style>
